<template>
  <div class="page-container">
    <!-- 查询表单 -->
    <el-form :model="searchParams" inline class="search-form" size="medium">
      <el-form-item label="车牌号码：">
        <el-input v-model="searchParams.carNumber" placeholder="请输入车牌号码" />
      </el-form-item>
      <el-form-item label="车主姓名：">
        <el-input v-model="searchParams.personName" placeholder="请输入车主姓名" />
      </el-form-item>
      <el-form-item label="状态：">
        <el-select v-model="searchParams.cardStatus" placeholder="未选择">
          <el-option label="全部" value="" />
          <el-option label="可用" value="0" />
          <el-option label="已过期" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getCarCardList()">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 操作按钮和信息展示 -->
    <div class="operation-and-info" type="flex" justify="space-between" align="middle">
      <!-- 操作按钮 -->
      <div class="operation-btn">
        <el-button v-auth-btn="'parking:card:add_edit'" type="primary" size="medium" @click="onAddCard">添加月卡</el-button>
        <el-button v-auth-btn="'parking:card:remove'" type="primary" size="medium" @click="onDeleteCardList">批量删除</el-button>
      </div>
      <!-- 信息展示 -->
      <div class="carcard-info">
        <i class="el-icon-info" />
        <span>本园区共计 1530 个车位，月卡用户 0 人，车位占有率 0.00%</span>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :data="carCardList" :header-cell-style="{ background: '#f7f8f9' }" @selection-change="onSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column prop="personName" label="车主名称" />
      <el-table-column prop="phoneNumber" label="联系方式" />
      <el-table-column prop="carNumber" label="车牌号码" />
      <el-table-column prop="carBrand" label="车辆品牌" />
      <el-table-column prop="totalEffectiveDate" label="剩余有效天数" />
      <el-table-column prop="cardStatus" label="状态" width="80">
        <template #default="{ row }">
          {{ row.cardStatus === 0 ? '可用' : '已过期' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button v-auth-btn="'parking:card:recharge'" type="text" @click="onRenewCard(row.id)">续费</el-button>
          <el-button v-auth-btn="'parking:card:query'" type="text" @click="onViewCard(row.id)">查看</el-button>
          <el-button v-auth-btn="'parking:card:add_edit'" type="text" @click="onEditCard(row.id)">编辑</el-button>
          <el-button v-auth-btn="'parking:card:remove'" type="text" @click="onDeleteCard(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      :current-page.sync="searchParams.page"
      layout="->, total, prev, pager, next"
      :total="carCardTotal"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { getCarListAPI, deleteCardAPI } from '@/api/car/carcard'
export default {
  name: 'CarCardPage',
  data() {
    return {
      // 查询表单数据
      searchParams: {
        page: 1, // 当前页码
        pageSize: 10, // 每页显示的条数
        carNumber: '', // 车牌号码
        personName: '', // 车主姓名
        cardStatus: '' // 状态
      },
      // 月卡信息列表
      carCardList: [],
      // 月卡信息列表数据总条数
      carCardTotal: 0,
      // 被选中的行数据
      selectedRows: []
    }
  },
  created() {
    // 获取月卡信息列表
    this.getCarCardList()
  },
  methods: {
    // 获取月卡信息列表
    async getCarCardList() {
      const res = await getCarListAPI(this.searchParams)
      this.carCardList = res.rows
      this.carCardTotal = res.total
    },
    // 按条件搜索月卡信息列表
    searchCarcardList() {
      // 重置页码
      this.searchParams.page = 1
      this.getCarCardList()
    },
    // 分页器页码切换
    handleCurrentChange(val) {
      this.searchParams.page = val
      this.getCarCardList()
    },
    // 添加月卡
    onAddCard() {
      this.$router.push({
        path: '/car/addCard'
      })
    },
    // 编辑月卡
    onEditCard(id) {
      this.$router.push({
        path: '/car/editCard',
        query: {
          id
        }
      })
    },
    // 删除月卡
    onDeleteCard(id) {
      this.$confirm('您确定要删除该月卡吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteCardAPI(id)
        // 刷新表格
        this.getCarCardList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    // 表格中被选择的选项发生变化时
    onSelectionChange(selection) {
      this.selectedRows = selection
    },
    // 批量删除月卡
    onDeleteCardList() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择要删除的月卡')
        return
      }
      this.$confirm('您确定要删除选中的月卡吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteCardAPI(this.selectedRows.map(item => item.id).join(','))
        // 刷新表格
        this.getCarCardList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    // 续费月卡
    onRenewCard(id) {
      this.$router.push({
        path: '/car/renewCard',
        query: {
          id
        }
      })
    },
    // 查看月卡详情
    onViewCard(id) {
      this.$router.push({
        path: '/car/viewCard',
        query: {
          id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  .search-form {
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
  }
  .operation-and-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .carcard-info {
      padding: 10px 15px;
      font-size: 14px;
      color: #444;
      border: 1px solid #67c6f6;
      background-color: #E6F7FF;
      .el-icon-info {
        margin-right: 5px;
        color: #2f77fb;
      }
    }
  }
  .el-table {
    margin-bottom: 20px;
  }
}
</style>
